<template>
  <div class="pad-20 bgc-default">
    <div class="pad-20 bg-color-white">
      <div class="mar-b-15">
        <el-button type="primary" @click="addLive">创建直播间</el-button>
        <el-button @click="saveSynchronousAudit">同步直播间</el-button>
        <span style="font-size: 14px;margin-left: 20px;color: #409eff;cursor: pointer;" @click="downloadFile">下载直播操作指引</span>
        <span style="font-size: 14px;margin-left: 20px;color: #409eff;cursor: pointer;"><a href="https://live.weixin.qq.com" target="_blank">前往微信直播管理后台</a></span>
      </div>
      <!--顶部搜索 -->
      <div class="top-operate">
        <div class="search-item">
          <label class="font-14">搜索直播：</label>
          <el-select
            class="select-class"
            v-model="seachNameType"
            style="width: 120px; margin-right: -5px"
          >
            <el-option label="房间名 " value="0"></el-option>
            <el-option label="主播昵称" value="1"></el-option>
          </el-select>
          <el-input
            @keyup.enter.native="handleSearch"
            v-model="searchKeyword"
            placeholder="请输入关键词"
          ></el-input>
          <label class="font-14 mar-l-20">直播计划：</label>
          <el-select
            class="select-class"
            v-model="searchListQuery.dateTimeType"
            style="width: 150px; margin-right: -5px"
          >
            <el-option label="计划开始时间 " value="0"></el-option>
            <el-option label="计划结束时间" value="1"></el-option>
          </el-select>
          <el-date-picker
            v-model="datePicker"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button-group>
            <el-button class="mar-l-20" type="primary" @click="handleSearch"
              >查询</el-button
            >
            <el-button @click="resetClick">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <!--商品状态 -->
      <div class="tabs-box mar-t-15">
        <el-tabs type="card" v-model="liveStatus" @tab-click="changeLiveStatus">
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane label="直播中" name="101"></el-tab-pane>
          <el-tab-pane label="未开始" name="102"></el-tab-pane>
          <el-tab-pane label="已结束" name="103"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- 内容列表 -->
      <div class="table-container mar-t-15">
        <el-table
          ref="multipleTable"
          :data="goodsList"
          @selection-change="handleSelectionChange"
          v-loading="listLoading"
          element-loading-text="加载中"
          style="width: 100%"
          header-cell-class-name="default-header"
          row-class-name="default-row"
        >
          <el-table-column min-width="400px" label="直播间信息" fixed="left">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p" @click="handleEdit(scope.row, 1)">
                <label><img :src="scope.row.coverImg" class="user-avatar cursor-p"/></label>
                <div class="font-14 pad-l-10 flex-col-between height-120">
                  <div>{{ scope.row.roomName }}</div>
                  <div class="line-h-14">
                    <div><span class="font-color-9">开始：</span>{{ scope.row.startDate }}</div>
                    <div><span class="font-color-9">结束：</span>{{ scope.row.endDate }}</div>
                    <div><span class="font-color-9">房号：</span>{{ scope.row.roomId }}</div>
                    <div><span class="font-color-9">主播：</span>{{ scope.row.anchorName }}</div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="400px" label="状态">
            <template slot-scope="scope">
              {{ dict.liveStatus[scope.row.liveStatus] }}
            </template>
          </el-table-column>
          <el-table-column width="400px" label="可看店数量">
            <template slot-scope="scope">
              <span v-if="scope.row.memberNum">{{
                scope.row.memberNum + 1
              }}</span>
              <span v-if="!scope.row.memberNum">1</span>
            </template>
          </el-table-column>
          <el-table-column
            width="140px"
            label="操作"
            align="right"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="medium"
                @click="handleEdit(scope.row, 1)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { pageLiveRoom, saveSynchronization } from '@/api/user/liveRoom'
import { getToken } from '@/utils/auth'
import { downloadFile } from '@/api/common/common'
import elDragDialog from '@/directive/el-dragDialog'

export default {
  directives: {
    elDragDialog
  },
  data() {
    return {
      total: null,
      joinType: '0',
      seachNameType: '0',
      multipleSelection: [],
      datePicker: [],
      listLoading: true,
      searchListQuery: {
        enterpriseId: this.getEnterpriseId(),
        dateTimeType: '0',
        currentPage: 1,
        size: 10
      },
      priceType: '1',
      liveGoods: {
        liveGoodsId: '',
        goodsImgUrl: '',
        priceType: '1',
        price: '',
        minPrice: '',
        maxPrice: '',
        originalPrice: '',
        nowPrice: '',
        liveStatus: '',
        goodsId: '',
        enterpriseId: this.getEnterpriseId()
      },
      liveGoodsVisible: false,
      searchKeyword: '',
      dict: {},
      goodsList: [],
      liveStatus: ''
    }
  },
  // 初始化页面
  created() {
    this.token = { accessToken: getToken() }
    this.pageLiveRoom()
  },
  filters: {
    priceFilter(e) {
      return e.toFixed(2)
    }
  },
  mounted() {},
  methods: {
    addLive() {
      this.$router.push({ path: '/live/live-studio/add/index' })
    },
    // 更改当前页数
    handleCurrentChange(val) {
      this.searchListQuery.currentPage = val
      this.pageLiveRoom()
    },
    saveSynchronousAudit() {
      saveSynchronization(
        this.searchListQuery.currentPage,
        this.searchListQuery.size,
        this.getEnterpriseId()
      ).then((response) => {
        if (response.isError) return
        this.$message({
          message: '成功',
          type: 'success'
        })
        this.pageLiveRoom()
      })
    },
    // 更改当前页面大小
    handleSizeChange(val) {
      this.searchListQuery.size = val
      this.pageLiveRoom()
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    pageLiveRoom() {
      this.listLoading = true
      if (this.datePicker) {
        this.searchListQuery.startDate = this.datePicker[0]
        this.searchListQuery.endDate = this.datePicker[1]
      } else {
        this.searchListQuery.startDate = ''
        this.searchListQuery.endDate = ''
      }
      if (this.seachNameType === '0') {
        this.searchListQuery['roomName'] = this.searchKeyword
        this.searchListQuery['anchorName'] = ''
      }
      if (this.seachNameType === '1') {
        this.searchListQuery['roomName'] = ''
        this.searchListQuery['anchorName'] = this.searchKeyword
      }
      this.searchListQuery.liveStatus = this.liveStatus * 1 === 0 ? '' : this.liveStatus
      this.searchListQuery.enterpriseId = this.getEnterpriseId()
      pageLiveRoom(this.searchListQuery).then((response) => {
        this.total = response.data.total
        this.goodsList = response.data.records
        if (response.data.dict) {
          this.dict = response.data.dict
        }
        this.listLoading = false
      })
    },
    changeLiveStatus() {
      this.handleSearch()
    },
    handleSearch() {
      this.searchListQuery.currentPage = 1
      this.pageLiveRoom()
    },
    resetClick() {
      this.searchListQuery = {
        enterpriseId: this.getEnterpriseId(),
        dateTimeType: '0',
        currentPage: 1,
        size: 10
      }
      this.searchKeyword = ''
      this.datePicker = ''
      this.seachNameType = '0'
      this.pageLiveRoom()
    },
    // 编辑
    handleEdit(row) {
      this.$router.push({
        path: '/live/live-studio/edit/index',
        query: { liveRoomId: row.liveRoomId }
      })
    },
    downloadFile() {
      downloadFile(
        'https://veekrayimg.joinsun.vip/upload/wechat-live-guide.docx',
        {},
        '接入小程序直播准入要求与流程'
      )
    }
  }
}
</script>
<style lang="less" scoped>
.top-operate {
  margin-bottom: 0;
  height: 85px;
  background-color: #f7f8fa;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
}

.search-item {
  flex-shrink: 0;
  padding: 0 20px;
  // padding: 15px 0;
  // &::-webkit-scrollbar {/*滚动条整体样式*/
  //   // width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
  //   height: 0px;
  //   margin-top: 10px;
  // }
  // &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  //   border-radius: 10px;
  //   -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  //   background: #535353;
  // }
  // &::-webkit-scrollbar-track {/*滚动条里面轨道*/
  //   -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  //   border-radius: 10px;
  //   background: #EDEDED;
  // }
  > div,
  .el-cascader {
    margin-right: 0px;
  }
  label {
    font-weight: unset;
  }

  .el-input {
    width: 200px;
  }
}
.btn-search {
  height: 60px;
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 150px;
  height: 120px;
  display: block;
  padding: 1px;
  border: #efefef 1px solid;
}

.category-style {
  color: #3abbdb;
}

.gray-bar {
  background: #e4e4e4;
  padding: 20px;
  margin-bottom: 20px;
  width: 80%;
}
.tips {
  color: gray;
  font-size: 12px;
  line-height: 1.2;
  padding-top: 5px;
}
.line-h-14{
  line-height: 1.4;
}
.flex-col-between{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
</style>
